<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0">
    <link rel="shortcut icon" type="image/x-icon" href="assets/img/favicon.ico">
    <title>Preclinic - Medical & Hospital - Bootstrap 4 Admin Template</title>
    <link rel="stylesheet" type="text/css" href="assets/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/font-awesome.min.css">
    <link rel="stylesheet" type="text/css" href="assets/css/style.css">
    <!--[if lt IE 9]>
		<script src="assets/js/html5shiv.min.js"></script>
		<script src="assets/js/respond.min.js"></script>
	<![endif]-->
</head>

<body>
    <div class="main-wrapper  account-wrapper">
        <div class="account-page">
            <div class="account-center">
                <div class="account-box" id="content">
                    <form id="form" action="index.html" class="form-signin">
						<div class="account-logo">
                            <a href="index.html"><img src="assets/img/logo-dark.png" alt=""></a>
                        </div>
						<div class="form-group">
                            <label>手机号码</label><span class="need_red"> *</span>
                            <input v-model="mobile" name="mobile" type="text" placeholder="请填写正确的手机号码" class="form-control">
                        </div>
                        <div class="form-group">
                            <label>登录密码</label><span class="need_red"> *</span>
                            <input v-model="password" name="password" type="password" placeholder="请输入密码" class="form-control">
                        </div>
						<div class="form-group">
                            <label>重复密码</label><span class="need_red"> *</span>
                            <input v-model="password2" type="password" placeholder="请再次输入密码" class="form-control">
                        </div>
                        <div class="form-group checkbox">
                            <input v-model="agree" type="checkbox">
                            <label>我已阅读并同意以下条款：</label>
                            <span class="need_red"> *</span>
							<input type="text" readonly value="很长很长的条款。" class="form-control">
							<input name="role" type="hidden" value="patient" class="form-control">
                        </div>
                        <div class="form-group text-center">
                            <button @click="register" class="btn btn-primary account-btn" type="button">提交</button>
                        </div>                        
                    </form>
					<div class="text-center login-link">
                        已经有账户了？ <a href="login.html">登录</a>
                    </div
                </div>
            </div>
        </div>
    </div>
    <script src="assets/js/vue.global.js"></script>
    <script src="assets/js/jquery-3.2.1.min.js"></script>
	<script src="assets/js/popper.min.js"></script>
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/app.js"></script>
	<script type="text/javascript" src="js/data.js"></script>
    <!--json data-->
    <script type="text/javascript" src="json/users.json"></script>
    <script type="text/javascript" src="assets/js/jquerysession.js"></script>
    <script type="text/javascript" src="js/data.js"></script>
	<script type="text/javascript">
	Vue.createApp({
		  data() {
		    return{
		        mobile:"",
		        password:"",
		        password2:"",
		        agree:false
		  	}
		  },
		  methods: {
			register(){
                //表单验证，元素的name与json的key相同
                var msg = checkForm($("#form")[0]);
                if(msg != null){
                    alert(msg);
                    return;
                }
                //两次密码要一致
                if(this.password != this.password2){
                    alert("请确保两次输入的密码一致");
                    return;
                }
                //组装数据
                var formText = '{"' + $("#form").serialize().replace(/&/g,'","').replace(/=/g,'":"') + '"}';
                let user = JSON.parse(formText);
                //判断是否已经有了
                let hasUser = users.filter((u)=>{
                    return u.mobile == this.mobile
                });
                if(hasUser.length > 0){
                    alert("该手机号码已被注册，请确认填写正确。");
                    return;
                }
                //默认头像、手机做名称
                user.img = "user.jpg";
                user.name = user.mobile;
                users.push(user);
                //登录
                $.session.set('name', user.name);
                $.session.set('img', user.img);
                $.session.set('mobile', user.mobile);
                $.session.set('role', user.role);
                $.session.set('age', user.age);
                window.location.href="index.html";
            },
		  }
	}).mount('#content');
	</script>
</body>

</html>